
<template>
  <div class="condition-container">
    <div class="condition-badge-id">
      C{{ conditionIndex }}
    </div>
    <div class="condition-content">
      <div class="condition-content-day">
        <div class="factor-Item-Title">
          {{ factorItemTitle }}
        </div>
        <div class="condition-content-text">前</div>
        <div class="inputValue inputValue-day">
          <el-input
            placeholder="0"
            v-model="formData.upperlimit"
          >
          </el-input>
        </div>
        <div class="condition-content-text">天，</div>
        <div class="inputValue inputValue-day">
          <el-input
            placeholder="1"
            v-model="formData.upperlimit"
            class="limit-value-input limit-day-input">
          </el-input>
        </div>
        <div class="condition-content-text">个交易日</div>
      </div>
      <div class="space-component"></div>
      <div class="condition-content-value">
        <div class="inputValue inputValue-limit">
          <el-input
            placeholder="不限"
            v-model="formData.upperlimit"
          >
            <i slot="suffix" class="">%</i>
          </el-input>
        </div>
        <div class="condition-content-text">~</div>
        <div class="inputValue inputValue-limit">
          <el-input
            placeholder="不限"
            v-model="formData.upperlimit"
            class="limit-value-input">
            <i slot="suffix" class="">%</i>

          </el-input>
        </div>
      </div>
    </div>
    <div class="deleteBtn">
      <i class="el-icon-remove" @click="deleteItem(index, drawingList)"/>
    </div>
  </div>
</template>


<script>
export default {
  name: 'ConditionItem',
  components: {},
  props: [
    'factorItemTitle',
    'conditionNumber',
    'element',
    'index',
    'drawingList',
    'conditionIndex',
  ],
  data() {
    return {
      formData: {
        field101: undefined,
        upperlimit: '',
        lowerlimit: ''
      },
      rules: {
        field101: [{
          required: true,
          message: '请输入单行文本',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        console.log('ddd')
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    deleteItem(index, parent) {
      this.$emit('deleteItem', index, parent)
    }
  }
}
</script>

<style lang="scss">

.condition-container {
  height: 48px;
  margin: 10px 5px;
  border-radius: 6px;
  background-color: #f6f7ff;
  display: flex;

  &:hover {
    color: #787be8;
    border: 1px solid #787be8;
    border-radius: 6px;
    background-color: #f6f7ff;
  }
}

.condition-badge-id {
  width: 40px;
  font-weight: bold;
  font-size: 16px;
  color: #AEAEAF;
  background-color: #E0E3FF;
  border-radius: 6px 0 0 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.condition-content {
  width: calc(100% - 40px);
  margin: 0 20px;
  display: flex;
  //justify-content: space-between;

  .condition-content-text {
    //font-weight: bold;
    font-size: 14px;
    color: #3A3C40;
  }

  .inputValue {
    width: 60px;
    margin: 0 6px 0 6px;
  }

  .inputValue-day {
    width: 40px;
  }

  .inputValue-limit {
    width: 100px;
    margin: 0 10px 0 10px;
  }

  .el-input__inner {
    border: none;
    height: 30px;
  }

  .el-input__suffix {
    color: gray;
    display: flex;
    align-items: center;
  }
}

.factor-Item-Title {
  margin: auto;
  color: #010028;
  font-weight: bold;
  font-size: 13px;
  width: 240px;
}

.condition-content-day {
  display: flex;
  align-items: center;
}

.condition-content-value {
  display: flex;
  align-items: center;
}

.deleteBtn {
  width: 40px;
  display: flex;
  align-items: center;
  color: #F56C6C;
  cursor: pointer;
}

.unit-component {
  width: 20px;
  //height: 30px;
  background-color: pink;
}

.space-component {
  width: 30px;
}

//三角形角标
//.badge-number {
//  width: 0;
//  height: 0;
//  border-width: 25px;
//  border-color: #D9DCFF transparent transparent #D9DCFF;
//  border-style: solid;
//  border-radius: 6px 0 0 0;
//}

</style>

<!--
append: ""
changeTag: true
clearable: true
disabled: false
document: "https://element.eleme.cn/#/zh-CN/component/input"
formId: 115
label: "密码"
labelWidth: null
layout: "colFormItem"
maxlength: null
placeholder: "请输入密码"
prefix-icon: ""
prepend: ""
readonly: false
regList: []
renderKey: 1643264831358
required: true
show-password: true
show-word-limit: false
span: 24
style: {width: '100%'}
suffix-icon: ""
tag: "el-input"
tagIcon: "password"
vModel: "field115"


changeTag: true
disabled: false
document: "https://element.eleme.cn/#/zh-CN/component/input"
formId: 118
label: "多行文本"
labelWidth: null
layout: "colFormItem"
maxlength: null
placeholder: "请输入多行文本"
readonly: false
regList: []
renderKey: 1643264914003
required: true
show-word-limit: false
span: 24
style: {width: '100%'}
tag: "el-input"
tagIcon: "textarea"
type: "textarea"
vModel: "field118"

changeTag: true
controls-position: ""
disabled: false
document: "https://element.eleme.cn/#/zh-CN/component/input-number"
formId: 119
label: "计数器"
labelWidth: null
layout: "colFormItem"
placeholder: "计数器"
regList: []
renderKey: 1643264989034
required: true
span: 24
step-strictly: false
tag: "el-input-number"
tagIcon: "number"
vModel: "field119"
-->
